<style>
.hero {
  text-decoration: underline;
  background-color: yellow;
}
.dm {
  color:deeppink;
}
.hp {
  color: green;
}
.death {
  color: red;
}
.log {
  line-height: 1.4em;
}
.h1, .h2 {
  padding: 4px;
  margin: 2px;
}
.h1 {
  border: 2px solid salmon;
}
.h2 {
  border: 2px solid aqua;
}
.lost {
  border-style: double;
  border-width: 10px;
}
.strike {
  font-size: 140%;
}
.dodge {
  opacity: 0.5;
  text-indent: 2em;
}
.s-skill {
  font-size: 200%;
  box-shadow: 5px;
}
</style>
<div id="container"></div>
<script type="module">
/*
let h1 = new Hero('路飞', 1000, 50, 80)
let h2 = new Hero('索隆', 1100, 45, 70)
h1.attack(h2)
if(h2.hp<0) { h2 输了}
h2.attach(h1)
if(h1.hp<0) { h1 输了}

while(true) {
  h1.attack(h2)
  if (h2.hp <=0) {
    console.log(h2.name 输了)
    break
  }
  [h1, h2] = [h2, h1]
}
*/
import Hero from './Hero.js'
import SHero from './SHero.js'

let h1 = new Hero('h1', '路飞', 1000, 200, 230, 0.2, 0.5)
let h2 = new Hero('h2', '索隆', 1100, 150, 300, 0.4, 0.3)
let h3 = new SHero('h1', '琦玉老师', 1000, 200, 230, 0.2, 0.5)
window.h1 = h1
window.h2 = h2

const container = document.getElementById('container')

function combat(s, o) {
  setTimeout(() => {
    const log = s.attack(o)
    container.innerHTML += log
    if(o.death) {
      container.innerHTML+= Hero.deathMsg(o)
      return
    }
    combat(o, s)
  }, 500)
}
combat(h3, h2)

// while(true) {
//   const log = h1.attack(h2)
//   container.innerHTML += log

//   if (h2.death) {
//     console.log(h2.name, '输了')
//     break
//   }
//   [h1, h2] = [h2, h1]
// }



</script>